<template>

  <!-- 定义布局容器 -->
  <el-container class="home-container">
    <!-- top -->
    <el-header style="height: 40px;background-color: #000000;">
      <div>
        <span>南欧汽配之家</span>
      </div>
      <el-row>
        <el-button type="danger" round style="text-align: center;">退出登录</el-button>
        <!-- <el-button type="primary" round style="text-align: center;">登录</el-button>
        <el-button type="success" round>注册</el-button> -->
      </el-row>

    </el-header>

    <!-- 导航栏 -->
   <div>
       <el-menu
         :default-active="activeIndex2"
         class="el-menu-demo"
         mode="horizontal"
         background-color="#303133"
         text-color="#fff"
         active-text-color="#FFE100"
         style="padding-left: 500px;background-color: #303133;"
         >
          <el-menu-item index="1" style="margin-right: 60px;font-size: 18px;" @click="tiaozhuan1"><i class="el-icon-s-home"></i>首页</el-menu-item>
          <el-menu-item index="2" style="margin-right: 60px;font-size: 18px;"  @click="tiaozhuan2"><i class="el-icon-s-shop" ></i>购物中心</el-menu-item>
          <el-menu-item index="3" style="margin-right: 60px;font-size: 18px;"  @click="tiaozhuan3"><i class="el-icon-s-opportunity"></i>车型查询</el-menu-item>
          <el-menu-item index="4" style="margin-right: 60px;font-size: 18px;"  @click="tiaozhuan4"><i class="el-icon-s-claim"></i>关于我们</a></el-menu-item>
          <el-menu-item index="5" style="margin-right: 60px;font-size: 18px;"  @click="tiaozhuan5"><i class="el-icon-user-solid"></i>个人中心</a></el-menu-item>
          </el-menu>
   </div>

 <!-- 定义布局容器 -->
  <el-container class="home-container">
    <!-- top -->
    <!-- 定义中间区域-->
    <el-card style="width: 100%;">
    <el-container>
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                style="width: 1200px;margin: 3px;margin-left: 130px;padding-left: 250px;padding-right: 60px;">
       <el-submenu :index="menu.id+''" v-for="menu in menuList" :key="menu.id"
       style="padding: 30px;">
         <template slot="title">
           <i :class="menuIcon[menu.id]"></i>
           <span style="font-size: 20px;">{{menu.name}}</span>
         </template>
         <!-- 定义二级菜单 -->
            <el-menu-item :index="childrenMenu1.id+''" v-for="childrenMenu1 in menu.children" :key="childrenMenu1.id"
                @click="defaultActiveMenu(childrenMenu1.path)" sl>
                 <template slot="title">
                   <i class="el-icon-menu"></i>
                   <span @click="gettuijian(childrenMenu1.id)">{{childrenMenu1.name}}</span>
                 </template>
            </el-menu-item>
       </el-submenu>
       </el-menu>
    </el-container>
    </el-card>
  </el-container>

<!-- 五星推荐 -->
<div style="margin-top: 30px;margin-left: 100px;">
  <span style="font-size: 20px;padding-left: 160px;margin-top: 20px;">推荐指数：</span>
   <!-- <div class="hello" style="padding-left: 160px;padding-top: 20px;">
     <Myrate  :score="5" :disabled="true" showText></Myrate>
  </div> -->
  <el-rate
    v-model="value1"
    disabled
    show-score
    text-color="#ff9900"
    score-template="{value}"
    style="padding-left: 160px;margin-top: 5px;">
  </el-rate>
  <el-row style="width: 500px;padding-left: 150px;">
    <el-col >
      <el-card :body-style="{ padding: '0px' }">
        <img style="margin: 0 auto;padding-top: 30px;width: 80%;"
             :src="'../images'+addItemForm1.images" class="image">
        <div style="padding: 14px;">
          <span style="font-size: 20px;margin-left: 20px;">{{addItemForm2.title}}</span>
          <div class="bottom clearfix">
            <time class="time">{{ currentDate }}</time>
            <el-button type="text" class="button" style="padding-top: 10px;" @click=goodDetails(addItemForm1.itemId)>查看详情</el-button>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <div style="width: 700px;margin-left: 700px;margin-top: -400px;">
  <el-descriptions title="售后推荐" direction="vertical" :column="4" border>
    <el-descriptions-item label="建议加注量" >{{addItemForm1.jialiang}}</el-descriptions-item>
    <el-descriptions-item label="基础油类型">{{addItemForm1.leixin}}</el-descriptions-item>
    <el-descriptions-item label="级别" :span="2">{{addItemForm1.jibie}}</el-descriptions-item>
    <el-descriptions-item label="最优适度">
      <el-tag type="info">{{addItemForm1.shidu}}</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="适用粘度">{{addItemForm1.liandu}}</el-descriptions-item>
  </el-descriptions>
</div>
</div>

<div style="height: 3px;width: 73%;background-color: #EE9900;margin: 0 auto;margin-top: 30px;"/>

<!-- 四星推荐 -->
<div style="margin-top: 30px;margin-left: 100px;">
  <span style="font-size: 20px;padding-left: 160px;margin-top: 20px;">推荐指数：</span>
   <!-- <div class="hello" style="padding-left: 160px;padding-top: 20px;">
     <Myrate  :score="5" :disabled="true" showText></Myrate>
  </div> -->
  <el-rate
    v-model="value2"
    disabled
    show-score
    text-color="#ff9900"
    score-template="{value}"
    style="padding-left: 160px;margin-top: 5px;">
  </el-rate>
  <el-row style="width: 500px;padding-left: 150px;">
    <el-col >
      <el-card :body-style="{ padding: '0px' }">
        <img style="margin: 0 auto;padding-top: 30px;width: 80%;"
             :src="'../images'+addItemForm2.images" class="image">
        <div style="padding: 14px;">
          <span style="font-size: 20px;margin-left: 20px;">{{addItemForm2.title}}</span>
          <div class="bottom clearfix">
            <time class="time">{{ currentDate }}</time>
            <el-button type="text" class="button" style="padding-top: 10px" @click=goodDetails(addItemForm2.itemId)>查看详情</el-button>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <div style="width: 700px;margin-left: 700px;margin-top: -400px;">
  <el-descriptions title="售后推荐" direction="vertical" :column="4" border>
    <el-descriptions-item label="建议加注量" >{{addItemForm2.jialiang}}</el-descriptions-item>
    <el-descriptions-item label="基础油类型">{{addItemForm2.leixin}}</el-descriptions-item>
    <el-descriptions-item label="级别" :span="2">{{addItemForm2.jibie}}</el-descriptions-item>
    <el-descriptions-item label="最优适度">
      <el-tag type="info">{{addItemForm2.shidu}}</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="适用粘度">{{addItemForm2.liandu}}</el-descriptions-item>
  </el-descriptions>
</div>
</div>

<div style="height: 3px;width: 73%;background-color: #EE9900;margin: 0 auto;margin-top: 30px;"/>

<!-- 三星推荐 -->
<div style="margin-top: 30px;margin-left: 100px;">
  <span style="font-size: 20px;padding-left: 160px;margin-top: 20px;">推荐指数：</span>
    <el-rate
    v-model="value3"
    disabled
    show-score
    text-color="#ff9900"
    score-template="{value}"
    style="padding-left: 160px;margin-top: 5px;">
  </el-rate>
  <el-row style="width: 500px;padding-left: 150px;">
    <el-col >
      <el-card :body-style="{ padding: '0px' }">
        <img style="margin: 0 auto;padding-top: 30px;width: 80%;"
             :src="'../images'+addItemForm3.images" class="image">
        <div style="padding: 14px;">
          <span style="font-size: 20px;margin-left: 20px;">{{addItemForm3.title}}</span>
          <div class="bottom clearfix">
            <time class="time">{{ currentDate }}</time>
            <el-button type="text" class="button" style="padding-top: 10px;" @click=goodDetails(addItemForm3.itemId)>查看详情</el-button>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <div style="width: 700px;margin-left: 700px;margin-top: -400px;">
  <el-descriptions title="售后推荐" direction="vertical" :column="4" border>
    <el-descriptions-item label="建议加注量" >{{addItemForm3.jialiang}}</el-descriptions-item>
    <el-descriptions-item label="基础油类型">{{addItemForm3.leixin}}</el-descriptions-item>
    <el-descriptions-item label="级别" :span="2">{{addItemForm3.jibie}}</el-descriptions-item>
    <el-descriptions-item label="最优适度">
      <el-tag type="info">{{addItemForm3.shidu}}</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="适用粘度">{{addItemForm3.liandu}}</el-descriptions-item>
  </el-descriptions>
</div>
</div>

  <TheHeader></TheHeader>
 </el-container>

</template>

<script>
import TheHeader from '../the/TheFooter.vue'
import TheFooter from '../the/TheHeader.vue'
import Myrate from '../test'
export default {

  // 初始化函数
  created () {
    // 动态获取左侧菜单信息
    this.getMenuList()
    // 设定模式选中按钮
    this.defaultActive = window.sessionStorage.getItem('activeMenu')
    this.getMenuList()
    this.addItemForm1 = this.itemmoren1
    this.addItemForm2 = this.itemmoren2
    this.addItemForm3 = this.itemmoren3
  },
  data () {
    return {
      value1: 5.0,
      value2: 4,
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'], // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
      value3: 3,
      currentDate: new Date(),
      // activeIndex: '1',
      activeIndex2: '3',
      // 左侧菜单数据
      menuList: [],
      tuijianList: [],
      addItemForm1: '',
      addItemForm2: '',
      addItemForm3: '',
      itemnull: '',
      itemmoren1: {
        images: '/2021/12/08/09e30157362841538aa2ece1c8dfdf8e.jpg',
        itemId: 31,
        jialiang: '5升',
        jibie: '1',
        leixin: '新能源',
        liandu: '3',
        shidu: '5w~6w~7w',
        title: '新能源排档液',
        xingji: 5
      },
      itemmoren2: {
        images: '/2021/12/08/92bae529966e4cdc9ba804c645319db5.jpg',
        itemId: 31,
        jialiang: '6升',
        jibie: '2',
        leixin: '混动能源',
        liandu: '3',
        shidu: '5w~6w~7w',
        title: '自动排档液',
        xingji: 4
      },
      itemmoren3: {
        images: '/2021/12/08/af464cc6168643b695c23b374b2135c1.jpg',
        itemId: 31,
        jialiang: '7升',
        jibie: '3',
        leixin: '绿色能源',
        liandu: '4',
        shidu: '6w~7w~8w',
        title: '合金装甲',
        xingji: 3
      },

      menuIcon: {
        1: 'iconfont iconuser',
        7: 'iconfont iconshangpin',
        16: 'iconfont iconicon--copy',
        21: 'iconfont iconquanxian',
        27: 'iconfont iconziyuan',
        32: 'iconfont iconziyuan'
      },
      // 定义是否折叠
      isCollapse: false,
      // 是否展现折叠动态效果
      isCollapseTransition: false,
      // 定义默认高亮
      defaultActive: ''

    }
  },
  components: {
    TheHeader,
    TheFooter,
    Myrate
  },
  methods: {
    async goodDetails (goodId) {
      // window.eventBus.$emit('good',v)
      console.log(goodId)
      // window.eventBus.$emit("goodId",goodId)
      window.sessionStorage.setItem('goodId', goodId)
      this.$router.push('/goodsDetails')
    },
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    tiaozhuan1 () {
      this.$router.push('/index')
    },
    tiaozhuan2 () {
      this.$router.push('/shopping')
    },
    tiaozhuan3 () {
      this.$router.push('/car')
    },
    tiaozhuan4 () {
      this.$router.push('/about')
    },
    tiaozhuan5 () {
      this.$router.push('/usernew')
    },
    logout () {
      // 1.删除session中的数据
      window.sessionStorage.clear()
      // 2.用户访问登录页面
      this.$router.push('/login')
    },
    async gettuijian (carId) {
      console.log(carId)
      const { data: result } = await this.$http.get('/cartuijian/gettuijian/' + carId)// findItemCatList
      if (result.status !== 200) return this.$message.error('推荐商品展示失败')
      this.tuijianList = result.data
      if (this.tuijianList.length == 0) {
        this.addItemForm1 = this.itemnull
        this.addItemForm2 = this.itemnull
        this.addItemForm3 = this.itemnull
      }

      for (var i = 0; i < this.tuijianList.length; i++) {
        if (this.tuijianList[i].xingji == 5) {
          this.addItemForm1 = this.tuijianList[i]
        }
        if (this.tuijianList[i].xingji == 4) {
          this.addItemForm2 = this.tuijianList[i]
        }
        if (this.tuijianList[i].xingji == 3) {
          this.addItemForm3 = this.tuijianList[i]
        }
      }
      console.log(this.addItemForm1)
    },
    async getMenuList () {
      const { data: result } = await this.$http.get('/car/getShopList')// findItemCatList
      if (result.status !== 200) return this.$message.error('左侧菜单查询失败')
      this.menuList = result.data
      console.log(this.menuList)
    },
    // 设定左侧折叠展开效果
    collspseClick () {
      this.isCollapse = !this.isCollapse
    },
    defaultActiveMenu (activeMenu) {
      // 为了实现返回之后的选中效果,应该将数据保存到第三方中sessionStory
      if (activeMenu == null) return
      window.sessionStorage.setItem('activeMenu', activeMenu)
      this.defaultActive = activeMenu
    }
  },
  computed: {
    activeIndex () {
      return this.$route.path.replace('/', '')
    }
  }
}
</script>

<style lang="less" scoped>
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 60%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }

  .clearfix:after {
      clear: both
  }
   .el-header {
     background-color: rgb(43,42,50);
     display: flex; //灵活的盒子容器
     justify-content: space-between; //左右对齐
     align-items: center; //文本元素居中对齐
     color: #FFFFFF; //设定字体颜色
     padding-left: 1px;

     >div {
       display: flex;
       align-items: center;

       span {
         margin-left: 15px;
         font-size: 25px; //设定字体高度
       }
     }
   }

.title{
    text-align: center;
    font-size: 30px;
    margin-top: 50px;
    font-family: "宋体";
    font-weight: bold;
}
.el-row{
    margin-bottom: 20px;
    margin-top: 15px;
}
.box{
    padding: 30px;
    background-image: url('../../assets/img/2.png') ;
    /*height: 600px;*/
}
.el-card {
    background-color: #EEEEEE;
    // background-image: url('../../assets/img/2.png') ;
  }
.box p{
    font-family: "宋体";
    font-size: 20px;
    line-height: 40px;
}

</style>
